<template>
  <div>
    <!-- 这是一个复用的组件，用来制作了两个，使用插槽将不同功能用到的按钮，放到这个里面 -->
    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        {{ index + 1 }}----{{ item.name }}
        <!-- 设置一个插槽，如果调用这个组件的时候，需要在这里设置删除按钮等内容的话，可以用插槽将结构插进来 -->
        <!-- 如果调用这个组件的时候需要使用点击事件等，将当前数据id传给父组件 -->
        <slot :id="item.id"></slot>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: {},
  },
};
</script>

<style>
</style>